<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadein/fadeout/callbacke function</title>
    <style>
        .c1 {
         width: 200px;
            height: 200px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <button class="b1" onclick="f1()">fadeIn</button>
    <button class="b2" onclick="f2()">fadeOut</button>
    <button class="b2" onclick="f3()">fadeToggle</button>
    <button class="b2" onclick="f4()">fadeto</button>

    <div class="c1" ></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    function f1(){
    $(".c1").fadeIn(2000)
    }
    function f2(){
    $(".c1").fadeOut(2000,function(){
        alert('666666666')
    })
    }
    function f3(){
    $(".c1").fadeToggle(2000,function(){
        alert('666666666')
    })
    }
    function f4(){
    $(".c1").fadeTo(2000,0.2)
    }
</script>
</body>
</html>